<template>
 <div class="one">
<div><h2>文章类型</h2></div>
    <div><h3>文章管理/文章类型</h3></div>
    
     <div class="three">
     <span><h2>创建时间：</h2></span>
     <el-date-picker 
      v-model="escort.createTime" 
      type="date" 
      placeholder="选择日期">
      </el-date-picker>
      
     </div>
     <div class="four">
       <span><h2>用户名：</h2></span> 
       <el-input
       v-model="escort.username"
        placeholder="请输入你要查询的用户名">
       </el-input>
     </div>
      <div class="four">
       <span><h2>性别：</h2></span> 
       <el-select
       v-model="escort.gender"
        placeholder="请输入性别">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
       </el-select>
     </div>
     <div class="four">
       <span><h2>用户状态：</h2></span> 
       <el-select
       v-model="escort.status"
        placeholder="请选择状态">
        <el-option
          v-for="item1 in statues"
          :key="item1.value"
          :label="item1.label"
          :value="item1.value"
        >
        </el-option>
       </el-select>
     </div>
      <div class="four">
       <span><h2>账号状态：</h2></span> 
       <el-select
       v-model="escort.status"
        placeholder="请选择状态">
        <el-option
          v-for="item1 in statues"
          :key="item1.value"
          :label="item1.label"
          :value="item1.value"
        >
        </el-option>
       </el-select>
     </div>
    <div class="four"><br><br>
<el-button type="primary" icon="el-icon-search" @click="choose">搜索</el-button>
<el-button type="primary" icon="el-icon-delete">清除</el-button>
    </div>
    <div class="four"><br><br>
     <el-button type="primary" icon="el-icon-edit">添加</el-button>
     <el-button type="primary" icon="el-icon-edit">重置</el-button>
    </div>
   
    <div>
       <el-table
      :data="escort"
      border
      style="width: 100%">
      <el-table-column
        prop="createTime"
        label="创建日期"
        width="110">
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名"
        width="110">
      </el-table-column>
      <el-table-column
        prop="revisistRate"
         width="110"
        label="回访率">
      </el-table-column>
      <el-table-column
        prop="satisfaction"
         width="110"
        label="满意度">
      </el-table-column>
      <el-table-column
        prop="orderNumber"
         width="110"
        label="订单数">
      </el-table-column>
       <el-table-column
        prop="payee"
         width="120"
        label="收款人">
      </el-table-column>
      <el-table-column
        prop="bank"
        label="银行"
         width="120">
      </el-table-column>
      <el-table-column
        prop="card"
        label="卡号"
         width="180">
      </el-table-column>
       <el-table-column
        prop="free"
         width="150"
        label="用户状态">
      </el-table-column>
      <el-table-column
        label="操作">
<el-button type="primary" icon="el-icon-search">查看</el-button>  
<el-button type="primary" icon="el-icon-search">编辑</el-button>
<el-button type="primary" icon="el-icon-search">删除</el-button>
      </el-table-column>
    </el-table>
    </div>
    

 </div>

</template>


<script>
  export default {
    data() {
      return{
        escort:{
          gender: "",
          stuate: ""
        },
        options: [
          {
            label: "男性",
            value: "0"
        },{
             label: "女性",
            value: "1"
        }],
         stuates: [
          {
            label: "启用",
            value: "1"
        },{
             label: "封禁",
            value: "2"
        }],
       stuates: [
          {
            label: "空闲中",
            value: "1"
        },{
             label: "服务中",
            value: "2"
        }],
         escort: [{
            createTime: '2016-05-02',
            username: '王小虎',
            revisistRate: '10%',
            satisfaction: '98%',
            orderNumber: '99',
            payee: '小花猫',
            bank: '建设银行',
            card: '5664546456',
            free: '1'
          }]

      };
      
    },
    methods: {
    //筛选按钮
    choose() {
      console.log(this.escort);
     this.$axios.post("escort/isExist",this.escort).then(res =>{
      console.log(res.data);
     })
    }
    }
    };
    
</script>

<style scoped>
.one {
  border: 1px solid red;
  width: 1500px;
	height: 780px;
}
.three{
  border: 1px solid yellow;
 height: 50px;
 display:table-cell;

}
.four{
  border: 1px solid yellow;
 height: 50px;
 display:table-cell;
}

</style>